<template>

  <div class="md-layout text-center">
    <div class="md-layout-item md-size-50 md-small-size-100">
      <md-card class="card-forget">
        <md-card-header class="md-card-header-icon md-card-header-green">
          <div class="card-icon">
            <md-icon>vpn_key</md-icon>
          </div>
          <h4 class="title">忘记密码</h4>
        </md-card-header>
        <md-card-content>
          <md-field>
            <label>邮箱</label>
            <md-input v-model="email" type="email"></md-input>
            <md-button @click="sendVerifyCode"
                       class="md-success md-round md-just-icon"
                       :class="{'md-success': !timing}"
                       :disabled="!!timing"
                       title="发送验证码">
              <md-icon v-show="!timing" class="md-sm">send</md-icon>
              <span v-show="timing">{{timing}}</span>
            </md-button>
          </md-field>
          <md-field>
            <label>验证码</label>
            <md-input v-model="verifyCode" type="text"></md-input>
          </md-field>
          <md-field>
            <label>新密码</label>
            <md-input v-model="password" type="password"></md-input>
          </md-field>
        </md-card-content>
        <md-card-actions>
          <md-button @click="findPassword" class="md-success md-round">找回密码</md-button>
        </md-card-actions>
      </md-card>
    </div>
  </div>
</template>
<script>

  import {toast, validateEmail} from '@/utils/tools'
  import {post} from '@/utils/ajax'
  import * as api from '@/constants/api'

export default {
  components: {

  },
  data () {
    return {
      support: false,

      email: '',
      verifyCode: '',
      password: '',

      timing: 0,
    }
  },
  methods:{
    cutTiming(startNum){
      if(startNum){
        this.timing = startNum;
      }else {
        this.timing--;
      }

      if(this.timing>0){
        setTimeout(this.cutTiming, 1000)
      }
    },
    sendVerifyCode(){
      let errMsg = '';
      if(!this.email){
        errMsg = '请输入邮箱'
      }else if(!validateEmail(this.email)) {
        errMsg = '请输入合法的邮箱'
      }
      if(errMsg){
        toast(errMsg, 'warning')
        return;
      }

      post(api.SEND_FORGET_VERIFY_CODE,{email: this.email}).then(()=>{
        toast('发送邮件成功');
        this.cutTiming(60);
      })
    },
    findPassword(){
      let errMsg = '';
      if(!this.email){
        errMsg = '请输入邮箱'
      }else if(!validateEmail(this.email)) {
        errMsg = '请输入合法的邮箱'
      }else if(!this.verifyCode){
        errMsg = '请输入验证码'
      }else if(!this.password){
        errMsg = '请输入密码'
      }
      if(errMsg) {
        toast(errMsg, 'warning')
        return;
      }

      post(api.FORGET_PASSWORD, {
        email: this.email,
        verifyCode: this.verifyCode,
        password: this.password,
      }).then(()=>{
        toast('密码修改成功')
        this.$router.push('/login')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .card-forget{

  }
</style>
